<template>
  <a-layout class="layout">
    <div class="layout-content">
      <div class="layout-card">
        <div class="layout-form-sider">
          <div class="brand-name">咖啡品类展览平台</div>
        </div>
        <div class="layout-form">
          <div class="form-title">后台管理系统登录</div>
          <a-form :model="form"
                  ref="formRef"
                  :rules="rules">
            <a-form-item name="username">
              <a-input v-model:value="form.username"
                       placeholder="请输入用户名/手机号码登录"
                       size="large">
                <template #prefix><UserOutlined/></template>
              </a-input>
            </a-form-item>
            <a-form-item name="password">
              <a-input-password v-model:value="form.password"
                       placeholder="请输入密码"
                       size="large" >
                       <template #prefix><LockOutlined/></template>
                      </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-checkbox v-model:checked="form.remember">记住登录状态</a-checkbox>
            </a-form-item>
            <a-form-item>
              <a-button type="primary"
                        block
                        htmlType="submit"
                        size="large"
                        :loading="loading"
                        @click="onLogin">
                登录
              </a-button>
            </a-form-item>
          </a-form>
          <a-divider plain>温馨提示</a-divider>
          <div class="a-text-secondary a-text-center">如忘记密码，请联系管理员登录重置</div>
        </div>
      </div>
    </div>
  </a-layout>
</template>

<script lang="ts" setup>
import useMessage from '@/hooks/useMessage';
import { login } from '@/server/modules/user'
import type { FormInstance } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const form = reactive({ username: '', password: '',remember:false })
const formRef = ref<FormInstance>()
const loading = ref(false)
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
})
const onLogin = async () => {
  try {
    loading.value = true
    await formRef.value?.validate()
    const res = await login(form)
    if (res.code === 200) {
      useMessage(res.code, res.message)
      if (form.remember) {
        localStorage.setItem('token', res.data.token)
      } else {
        sessionStorage.setItem('token', res.data.token)
      }
      localStorage.setItem('user_info', JSON.stringify(res.data.user_info))
      setTimeout(() => {
        router.push('/admin/')
      }, 2000);
    } else {
      useMessage(res.code, res.message)
    }
  } catch {
    return useMessage(500, '登录失败，请填写账号和密码')
  } finally {
    setTimeout(() => {
      loading.value = false
    }, 2000);
  }
}
</script>

<style scoped>
.layout {
  min-height: 100vh;
}
.layout-content {
  display: flex;
  justify-content: center;
  padding-top: 100px;
}
.layout-card {
  display: flex;
  height: 100%;
  width: 800px;
  height: 450px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 8px;
}
.layout-form-sider {
  flex: 0 0 400px;
  background-color: #fafafa;
  background: url(@/assets/login-cover.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.layout-form {
  padding: 32px 48px;
  flex: 1;
}
.form-title{
  font-size: 24px;
  margin-bottom: 32px;
  font-weight: 500;
}
.brand-name {
  font-size: 32px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
</style>